import React from 'react';
import {Field, Formik} from 'formik';
import {ScrollView, StyleSheet, Text, View} from 'react-native';
import * as Yup from 'yup';
import {connect, ConnectedProps} from 'react-redux';
import Touchable from '@/components/Touchable';
import {RootState} from '@/models/index';
import Input from './../components/Input';

interface Values {
  account: string;
  password: string;
}

const initialValues = {
  account: '',
  password: '',
};

const mapStateToProps = ({loading}: RootState) => {
  return {
    loading: loading.effects['user/login'],
  };
};

const connector = connect(mapStateToProps);

type ModelState = ConnectedProps<typeof connector>;

interface IProps extends ModelState {}

const validationSchema = Yup.object().shape({
  account: Yup.string().trim().required('请输入您的账号'),
  password: Yup.string().trim().required('请输入您的密码'),
});

const Login: React.FC<IProps> = props => {
  const {dispatch, loading} = props;
  const onSubmit = (data: Values) => {
    console.log(data);
    dispatch({
      type: 'user/login',
      payload: data,
    });
  };
  return (
    // 出现输入框推荐使用ScrollView  为防止出现虚拟键盘导致组件被遮挡
    <ScrollView
      keyboardShouldPersistTaps="handled" // 切换多个input时键盘保持唤醒状态
    >
      <Text style={styles.logo}>听书</Text>
      <Formik
        validationSchema={validationSchema} // 校验规则
        initialValues={initialValues} // 初始值
        onSubmit={onSubmit}>
        {({handleSubmit}) => {
          return (
            <View>
              <Field
                name="account"
                component={Input}
                placeholder="请输入用户名"
              />
              <Field
                name="password"
                component={Input}
                placeholder="请输入用密码"
                secureTextEntry
              />
              {/* <TextInput
                onChangeText={handleChange('account')} //发成改变触发的函数   handleChange返回一个函数 参数必须对应才能保存起来
                onBlur={handleBlur('account')}
                placeholder="请输入用户名"
                value={values.account}
              />
              {errors.account ? (
                <Text style={styles.errorText}>{errors.account}</Text>
              ) : null}
              <TextInput
                onChangeText={handleChange('password')} //发成改变触发的函数   handleChange返回一个函数 参数必须对应才能保存起来
                onBlur={handleBlur('password')}
                placeholder="请输入用密码"
                value={values.password}
                secureTextEntry //隐藏输入的文本
              />
              {errors.password ? (
                <Text style={styles.errorText}>{errors.password}</Text>
              ) : null} */}
              <Touchable
                disabled={loading}
                onPress={handleSubmit}
                style={styles.loginBtn}>
                <Text style={styles.loginText}>登录</Text>
              </Touchable>
            </View>
          );
        }}
      </Formik>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  logo: {
    color: '#ff4000',
    fontWeight: 'bold',
    fontSize: 50,
    textAlign: 'center',
    marginTop: 40,
  },
  loginBtn: {
    margin: 10,
    marginTop: 40,
    height: 40,
    borderRadius: 20,
    borderColor: '#dd4400',
    borderWidth: 2,
    alignItems: 'center',
    justifyContent: 'center',
  },
  loginText: {
    color: '#ff4400',
    fontWeight: 'bold',
    fontSize: 16,
  },
});

export default connector(Login);
